<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../bower_components/marked-element/marked-element.html">

<link rel="import" href="shared-styles.html">
<dom-module id="landing-whatsnew">
    <template>
        <style include="shared-styles"></style>
        <style>
        #whatsnew {
            display: block;            
        }
        
        #whatsnew[hidden] {
            display: none;
        }

        #whatsnew  h4 {
          font-size: 2.28rem;
          margin: 1.14rem 0 .912rem;
        }

        #whatsnew  h5 {
          line-height: 140%;
          font-size: 1.64rem;
          margin: .82rem 0 .656rem;
        }

        #whatsnew  h6 {
          font-size: 1rem;
        }

        #whatsnew paper-material {
            @apply(--shadow-elevation-2dp);
            display: block;
        }

        #whatsnew paper-material img {
            display: block;
        }
        
        #whatsnew paper-button {
          background-color: var(--app-accent-color);
          color: #fff;
          font-size: 18px;
          height: 54px;
          padding: 0 50px;
          margin: 40px 0;
          font-weight: 500;
        }
        
        #whatsnew {
          /*background-color: var(--app-accent-color);*/
          font-weight: 400 !important;
          background-color: #444;
          color: #fff;
        }
        #whatsnew h4.title {
          font-weight: 400 !important;
          line-height: 110%;
        }

        .light {
            font-weight: 400 !important;
        }
        #whatsnew .promtext {
            margin: 8px 0 24px 0;
        }
        
        #whatsnew .promtext.top {
            margin-top: 1.14em;
        }
        
        #whatsnew .promtext h6 {
            line-height: 150%;
            margin: 1rem 0 1rem 0;
        }
        
        #whatsnew .right-alligned {
            text-align: right;
        }
        
        @media screen and (max-width: 993px) {
            #whatsnew .right-alligned {
                text-align: left;
            }
            #whatsnew br.widescreens {
                display: none;
            }
        }
        
        #whatsnew .emph {
            /*color: #37B8D2;*/
            color: #A0DDEB;
        }
        
        #whatsnew h4 {
            padding: 0.112rem 0 0.912rem 0 !important;
        }
        
        #whatsnew a {
            color: #acd !important;
            cursor: pointer;
        }
        
        #whatsnew .join {
            display: inline-block;
        }
        
        #whatsnew .join img {
            vertical-align: middle;
            margin: 0 8px;
            height: 30px;
        }
        
        #whatsnew .person {
            margin-bottom: 8px;
        }
        
        #whatsnew .people > *,
        #whatsnew .person > * {
            vertical-align: middle;
            margin-right: 8px;
            display: inline-block;
            line-height: 1.2em;
        }
        
        #whatsnew .person-img {
            border-style: solid;
            border-width: 2px;
            border-color: #fff;
            border-radius: 69px;
            width: 60px;
            height: 60px;
            float: left;
        }
        
        #whatsnew .people .comp {
            opacity: 0.54;
            font-size: .9em;
        }
        
        #whatsnew .people .name {
            padding-top: 8px;
        }

        .image-block {
        }
        </style>
        <div id="whatsnew" class="section dark">
            <div class="contains">
                <div class="grid-row">
                    <div class="xs12 s6 m6 l6">
                        <h5>What's new in Mist.io?</h5>
                        <h4 class="light title"><a href$="[[data.href]]" target="new">[[data.title]]</a></h4>
                        <div class="promtext">
                            <marked-element markdown="[[data.description]]">
                                <div slot="markdown-html"></div>
                            </marked-element>
                            <a href="[[data.href]]" target="_blank">Read more &raquo;</a>
                        </div>
                    </div>
                    <div class="xs12 s4 m6 l6 image-block">
                        <paper-material class="icon-block center">
                            <img class="with-shadow" src="[[data.image]]"/>
                        </paper-material>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
    Polymer({

        is: 'landing-whatsnew',

        properties: {
            data: Object
        }

    });
    </script>
</dom-module>
